<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { defineAsyncComponent } from "vue";

const props = defineProps<{
  formItemConfigList: any;
  colNum?: number;
  action?: string;
  disabled?: boolean;
}>();

const localFormData = defineModel<any>({});

// 标记客户端环境
const isClient = ref(false);

// 动态导入组件，禁用SSR
const AvatarCropper = defineAsyncComponent({
  loader: () => import("~/components/SUI/S-avatar.vue"),
  suspensible: false, // 关键：禁止在服务端渲染该组件，使用 suspensible 替代 ssr
});

onMounted(() => {
  isClient.value = true; // 确保在客户端挂载后才显示组件
});
</script>
<template>
  <el-row :sapn="24">
    <template v-for="formItemConfig in formItemConfigList">
      <el-col
        v-if="
          !(
            formItemConfig.formHide &&
            (formItemConfig.formHide === 'all' ||
              (Array.isArray(formItemConfig.formHide) &&
                formItemConfig.formHide.includes(props.action)))
          )
        "
        :span="formItemConfig.span || (props.colNum && 24 / props.colNum) || 12"
        :key="formItemConfig.prop"
      >
        <el-form-item
          :label="formItemConfig.label"
          :label-width="160"
          :rules="formItemConfig.formRules"
          :prop="formItemConfig.prop"
        >
          <el-date-picker
            v-if="formItemConfig.type === 'date'"
            v-model="localFormData[formItemConfig.prop as string]"
            type="date"
            placeholder="选择日期"
            v-bind="formItemConfig"
          />
          <el-input-number
            v-else-if="formItemConfig.type === 'number'"
            v-model="localFormData[formItemConfig.prop as string]"
            v-bind="formItemConfig"
            controls-position="right"
            class="w-220px!"
          >
            <template #suffix>
              <span>{{ formItemConfig.unit }}</span>
            </template>
          </el-input-number>
          <el-switch
            v-else-if="formItemConfig.type === 'switch'"
            v-model="localFormData[formItemConfig.prop as string]"
            v-bind="formItemConfig"
            class="w-220px!"
          />
          <el-select
            v-else-if="formItemConfig.type === 'select'"
            v-model="localFormData[formItemConfig.prop as string]"
            filterable
            clearable
            :multiple="formItemConfig.multSelect"
            class="w-220px!"
            placeholder=""
          >
            <el-option
              v-for="item in formItemConfig.options || []"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-tree-select
            v-else-if="formItemConfig.type === 'treeSelect'"
            v-model="localFormData[formItemConfig.prop as string]"
            :data="formItemConfig.treeData"
            :render-after-expand="false"
            class="w-220px!"
            filterable
            clearable
            :node-key="formItemConfig.key"
            default-expand-all
          />

          <AvatarCropper
            v-else-if="isClient && formItemConfig.type === 'avatar'"
            :disabled="
              (formItemConfig.formDisable &&
                formItemConfig.formDisable.includes(props.action)) ||
              props.disabled
            "
            v-model="localFormData[formItemConfig.prop as string]"
          />
          <template v-else-if="formItemConfig.type === 'custom'">
            <slot :name="formItemConfig.prop" />
          </template>
          <el-input
            v-else
            v-model="localFormData[formItemConfig.prop as string]"
            v-bind="formItemConfig"
            class="w-220px!"
            :type="formItemConfig.type || 'text'"
            :disabled="
              formItemConfig.formDisable &&
              formItemConfig.formDisable.includes(props.action)
            "
            :autosize="formItemConfig.autosize || { minRows: 2, maxRows: 4 }"
            show-word-limit
          />
        </el-form-item>
      </el-col>
    </template>
  </el-row>
</template>
